<template>
  <!--表格显示列界面-->
  <el-dialog title="表格显示列" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
    <el-table ref="fitlerTable" :data.sync="showColumns" height="330px" tooltip-effect="dark" header-align="left" align="left" :size="size" style="width:100%" @selection-change="selectionChange">
      <el-table-column type="selection" width="45" />
      <el-table-column label="属性">
        <template slot-scope="scope">{{ scope.row.prop }}</template>
      </el-table-column>
      <el-table-column label="列名">
        <template slot-scope="scope">
          <el-input :size="size" v-model="scope.row.label" />
        </template>
      </el-table-column>
      <el-table-column label="最小宽度">
        <template slot-scope="scope">
          <el-input :size="size" v-model="scope.row.minWidth" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="scope">
          <el-button :size="size" type="text" @click="handleUp(scope.$index, scope.row)"><i class="el-icon-arrow-up" /></el-button>
          <el-button :size="size" type="text" @click="handleDown(scope.$index, scope.row)"><i class="el-icon-arrow-down" /></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button :size="size" @click.native="dialogVisible = false">取消</el-button>
      <el-button :size="size" type="primary" @click.native="handleFilterColumns">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'KtTableColumnFilterDialog',
  props: {
    columns: { type: Array, default: function () { return [] } },
    size: { type: String, default: 'mini' }
  },
  data () {
    return {
      // 列表选中列
      selections: [],
      showColumns: [],
      dialogVisible: false
    }
  },
  methods: {
    // 选择切换
    selectionChange (selections) {
      this.selections = selections
    },
    // 设置可见性
    setDialogVisible (visible) {
      this.dialogVisible = visible
    },
    handleUp (index, row) {
      if (index > 0) {
        let temp = this.showColumns[index]
        Vue.set(this.showColumns, index, this.showColumns[index - 1])
        Vue.set(this.showColumns, index - 1, temp)
      }
    },
    handleDown (index, row) {
      if (index < this.showColumns.length - 1) {
        let temp = this.showColumns[index]
        Vue.set(this.showColumns, index, this.showColumns[index + 1])
        Vue.set(this.showColumns, index + 1, temp)
      }
    },
    // 处理表格列过滤显示
    handleFilterColumns () {
      let filterColumns = []
      let arr = []
      for (let i = 0; i < this.showColumns.length; i++) {
        this.showColumns[i].show = this.hasColumn(this.showColumns[i])
        arr.push({ prop: this.showColumns[i].prop, show: this.showColumns[i].show })
        if (this.showColumns[i].show) {
          filterColumns.push(this.showColumns[i])
        }
      }
      localStorage.setItem('columns_' + this.$route.meta.id, JSON.stringify(arr))
      this.$emit('handle-filter-columns', { filterColumns: filterColumns })
    },
    // 父组件直接调用，生成列信息
    initColumns () {
      let cols = JSON.parse(localStorage.getItem('columns_' + this.$route.meta.id) || '[]')
      if (cols.length === this.showColumns.length) {
        let arr = []
        for (let i = 0; i < cols.length; i++) {
          for (let j = 0; j < this.showColumns.length; j++) {
            if (cols[i].prop === this.showColumns[j].prop) {
              this.showColumns[j].show = cols[i].show
              arr.push(this.showColumns[j])
              break
            }
          }
        }
        this.showColumns = arr
      }
      this.handleFilterColumns()
    },
    hasColumn (column) {
      if (this.selections.length > 0) {
        for (let i = 0; i < this.selections.length; i++) {
          let col = this.selections[i]
          if (column.prop === col.prop) {
            return true
          }
        }
        return false
      }
      return column.show === undefined || column.show
    }
  },
  mounted () {
    this.showColumns = this.columns
  }
}
</script>
